import React, { useEffect, useRef } from 'react';
import CustomForm from '../../../../components/CustomForm';
import { Input, message } from 'antd';
import services from '../../../../services/api';
import { compare } from '../../../../utils/compare';
import useAppProductEventData from 'src/hook/useAppProductEventData';

function Add(props) {
  const actionType = props.actionType || 'add';
  const formRef = useRef();
  const api = 'indexDataSource';
  const record = props.value || props.record || {};
  const { app_id, product_id, event_id, source_name, remark, source_code } = record;
  const id = record.data_source_id;

  useEffect(() => {}, []);

  const { items } = useAppProductEventData({
    ...props,
    app_id,
    event_id,
    product_id,
    disabled: actionType !== 'add' && actionType !== 'copy',
    form: formRef.current,
    layout: {
      className: 'tantuer-form-item3 tantuer-form-item-nowrap',
    },
  });

  const handleSubmit = () => {
    formRef.current.validateFields((err, values) => {
      if (!err) {
        const params = {
          app_id: values.app_id,
          product_id: values.product_id,
          event_id: values.event_id,
          source_name: values.source_name,
          source_code: values.source_code,
          remark: values.remark,
        };
        if (actionType === 'update') {
          params.data_source_id = id;
        }
        services[api][actionType](params).then((data) => {
          if (data.code === 0) {
            message.success(data.msg);
            if (props.closeModal) {
              props.closeModal();
            }
          } else {
            message.error(data.msg);
          }
        });
      }
    });
  };

  const formItems = [
    ...items,
    {
      label: {
        label: '数据源名称',
        className: 'tantuer-form-item3 tantuer-form-item-nowrap',
      },
      name: 'source_name',
      options: {
        initialValue: source_name,
        rules: [
          { required: true, message: '请填写数据源名称' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        ],
      },
      component: (
        <Input placeholder='数据源名称' style={compare(props, 'source_name')} disabled={actionType === 'detail'} />
      ),
    },
    {
      label: {
        label: '数据源code',
        className: 'tantuer-form-item3 tantuer-form-item-nowrap',
      },
      name: 'source_code',
      options: {
        initialValue: source_code,
        rules: [
          { required: true, message: '请填写数据源名称' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[a-zA-Z][_a-zA-Z0-9]*$/, message: '限英文数字下划线，并以英文开头' },
        ],
      },
      component: (
        <Input
          placeholder='数据源code'
          style={compare(props, 'source_code')}
          disabled={actionType === 'update' || actionType === 'detail'}
        />
      ),
    },
    {
      label: {
        label: '描述',
        className: 'tantuer-form-item3 tantuer-form-item-nowrap',
      },
      name: 'remark',
      options: {
        initialValue: remark,
        rules: [{ max: 256, message: '最长256个字符' }],
      },
      component: (
        <Input.TextArea
          disabled={actionType === 'detail'}
          style={compare(props, 'remark')}
          placeholder={'请填写简短描述，限256字内'}
        />
      ),
    },
  ].filter(Boolean);

  return (
    <CustomForm
      {...props}
      closeModal={props.closeModal}
      createForm={(ref) => (formRef.current = ref)}
      formItems={formItems}
      onHandleSubmit={handleSubmit}
      colNum={1}
      hideSubmit={actionType === 'detail'}
    />
  );
}

export default Add;
